<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div style="width:100%">
                <div style="width:100%;float:left">
                    <table style="font-size:14px;width:100%;border-spacing:0px;white-space: nowrap;" border="0" class="mytableclass">
                        <tr>
                            <td colspan="6">
                                <table style="font-size:14px;" border="0">
                                    <tr>
                                        <td width="67px">生成日期</td>
                                        <td>
                                            <el-date-picker v-model="datetime1" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm" style="width:180px;" :clearable="false">
                                            </el-date-picker>
                                            -
                                            <el-date-picker v-model="datetime2" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm" style="width:180px;" :clearable="false">
                                            </el-date-picker>
                                        </td>
                                        <td>
                                            <el-radio @change="hasChange" v-model="flagcheck" label="0">未回收</el-radio>
                                            <el-radio @change="hasChange" v-model="flagcheck" label="1">已回收</el-radio>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td width="80px" align="right" style="font-weight:bold;font-size:17px">条码号：</td>
                            <td align="left">
                                <input value="" clearable :placeholder="barcodeholder" class="el-input__inner" autocomplete="off" @keydown.enter="scanBarcode('0', $event)" style="width:465px;height:36px" ref="barcode" id="barcodediv" @focus="HightlightPos()" />
                            </td>
                            <td align="right">
                                <div class="top-deal">
                                    <el-button icon="el-icon-refresh" @click="btnSign()">查询</el-button>
                                    <el-button icon="el-icon-back" @click="save()">回收/保存</el-button>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="pagecenter">
            <rm-layout-right splitcolor="#F8F8FF" movingcolor="#e7e7ee" :splitwidth="5" :fixsize="450" :minfixsize="300">
                <template v-slot:fix>
                    <div style="height:100%;width:100%;background-color:#ddccbb;">
                        <vxe-table show-overflow ref="xTable2" :loading="LogLoading" height="auto" :data="LogList" border size="mini" show-header-overflow highlight-current-row highlight-hover-row resizable stripe :sort-config="{ trigger: 'cell' }">
                            <vxe-table-column field="log_date" title="操作日期" width="120px" align="center"></vxe-table-column>
                            <vxe-table-column field="trans_type" title="操作类型" width="80px" align="center" :formatter="['formatSelectList', reqstatOptiontable]"></vxe-table-column>
                            <vxe-table-column field="log_content" title="操作内容" width="200px"></vxe-table-column>
                            <vxe-table-column field="username" title="操作者" width="100px" align="center"></vxe-table-column>
                            <vxe-table-column field="ref_user" title="相关人" width="100px"></vxe-table-column>
                            <vxe-table-column field="labgroupid" title="工作组" width="100px"></vxe-table-column>
                            <vxe-table-column field="computer_name" title="操作时机器名" width="100px">
                                <template v-slot="{ row }">
                                    <span style="color:blue;">{{row.computer_name}}</span>
                                    <i class="el-icon-refresh" @click="repalceComputerName(row)"></i>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column field="mac_address" title="操作时机器MAC" width="100px"></vxe-table-column>
                            <vxe-table-column field="syncflag" title="同步HIS标志" width="100px"></vxe-table-column>
                            <vxe-table-column field="synctime" title="同步时间" width="100px"></vxe-table-column>
                            <vxe-table-column field="syncerrtext" title="同步失败信息" width="100px"></vxe-table-column>
                        </vxe-table>
                    </div>
                </template>
                <div ref="xTableDiv" style="height:100%" v-show="flagcheck == '1'">
                    <vxe-table show-overflow ref="xTable3" :loading="MasterDataLoading" height="auto" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" :data="MasterData2" border size="mini" show-header-overflow highlight-current-row highlight-hover-row resizable stripe @current-change="detailretrieve" :edit-config="{ trigger: 'click',mode: 'cell',showStatus: false, }" :cell-class-name="xTableDiv_cellCustomStyle" :sort-config="{ trigger: 'cell' }" :row-class-name="xTableDiv_rowClass">
                        <vxe-table-column type="index" title="NO." width="40" header-align="center" align="center"></vxe-table-column>
                        <vxe-table-column field="barcode" title="条码号" width="120" header-align="center" sortable> </vxe-table-column>
                        <vxe-table-column field="retuserno" title="回收人" width="101" header-align="center"></vxe-table-column>
                        <vxe-table-column field="retdt" title="回收时间 " width="134" header-align="center"></vxe-table-column>
                        <vxe-table-column field="comments" sortable title="回收备注" width="100" show-overflow :edit-render="{name: 'input',autoselect:true}">
                        </vxe-table-column>
                        <vxe-table-column field="pat_name" title="姓名 " width="56" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_sex" title="性别 " width="40" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_agestr" title="年龄 " width="40" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_no" title="病历号" width="70" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_typecode" title="病人类型" width="80" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="req_groupna" title="分单类别" width="86" header-align="center" sortable>
                            <template v-slot="{ row }">
                                <div v-bind:style="{
										background: $pub.ColorChange(row.tube_color),
										color: $pub.colorConvert(row.tube_color),
									}" style="margin:0 -10px;text-align:center;">
                                    {{ row.req_groupna }}
                                </div>
                            </template>
                        </vxe-table-column>
                        <vxe-table-column field="specimen_name" title="标本类型" sortable width="120" header-align="center" show-overflow></vxe-table-column>
                        <vxe-table-column field="sampledate" title="标本日期" width="90" header-align="center" :formatter="['toDateString', 'yyyy-MM-dd']" align="center"></vxe-table-column>
                        <vxe-table-column field="rptunitid" sortable title="报告单元" width="150" header-align="center" show-overflow></vxe-table-column>
                        <vxe-table-column field="sampleno" title="样本号" width="100" header-align="center" sortable show-overflow></vxe-table-column>
                        <vxe-table-column field="report_user" title="检验医生" width="101" header-align="center"></vxe-table-column>
                        <vxe-table-column field="rechk_username" title="审核医生" width="80" header-align="center"></vxe-table-column>
                        <vxe-table-column field="rechk_dt" title="审核时间 " width="134" header-align="center" :formatter="['toDateString', 'yyyy-MM-dd']"></vxe-table-column>
                        <vxe-table-column field="reportid" title="报告ID" width="110" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="input_dt" header-align="center" sortable title="录入时间" width="140" show-overflow></vxe-table-column>
                        <vxe-table-column field="req_stat" title="状态" width="60" header-align="center"></vxe-table-column>
                    </vxe-table>
                </div>
                <div ref="xTableDiv" style="height:100%" v-show="flagcheck == '0'">
                    <vxe-table show-overflow ref="xTable1" :loading="MasterDataLoading" height="auto" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" :data="MasterData" border size="mini" show-header-overflow highlight-current-row highlight-hover-row resizable stripe @current-change="detailretrieve" :edit-config="{ trigger: 'click',mode: 'cell',showStatus: false, }" :cell-class-name="xTableDiv_cellCustomStyle" :sort-config="{ trigger: 'cell' }" :row-class-name="xTableDiv_rowClass" :select-config="{ reserve: true }" header-align="center" :span-method="rowspanMethod">
                        <vxe-table-column field="cp_selection" width="20px" align="center">
                            <template v-slot:header="{ column }">
                                <el-checkbox v-model="selectall" style="text-align:center;" @change="ChkAll($event)"></el-checkbox>
                            </template>
                            <template v-slot="{ row, rowIndex }">
                                <el-checkbox v-model="row.cp_selection" style="text-align:center;" true-label="1" false-label="0"></el-checkbox>
                            </template>
                        </vxe-table-column>
                        <vxe-table-column field="pat_name" title="姓名 " width="56" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="specialtypename" title="特殊病人类型" width="86" header-align="center" sortable> </vxe-table-column>
                        <vxe-table-column field="note" title="特殊病人备注" width="100" header-align="center" show-overflow="tooltip" sortable> </vxe-table-column>
                        <vxe-table-column field="barcode" title="条码号" width="100" header-align="center" sortable> </vxe-table-column>
                        <vxe-table-column field="retuserno" title="回收人" width="60" header-align="center"></vxe-table-column>
                        <vxe-table-column field="retdt" title="回收时间 " width="134" header-align="center"></vxe-table-column>
                        <vxe-table-column field="comments" sortable title="回收备注" width="100" show-overflow="tooltip" :edit-render="{name: 'input',autoselect:true}">
                            <template v-slot:edit="{ row, rowIndex }">
                                <el-input v-if="row.cp_selection=='1'" v-model="row.comments" style="width:100%;height:100%;"></el-input>
                                <span v-else>{{row.comments }}</span>
                            </template>
                        </vxe-table-column>
                        <vxe-table-column field="req_groupna" title="分单类别" width="86" header-align="center" sortable>
                            <template v-slot="{ row }">
                                <div v-bind:style="{
										background: $pub.ColorChange(row.tube_color),
										color: $pub.colorConvert(row.tube_color),
									}" style="margin:0 -10px;text-align:center;">
                                    {{ row.req_groupna }}
                                </div>
                            </template>
                        </vxe-table-column>
                        <vxe-table-column field="specimen_name" title="标本类型" sortable width="86" header-align="center" show-overflow></vxe-table-column>
                        <vxe-table-column field="rptunitid" sortable title="报告单元" width="150" header-align="center" show-overflow></vxe-table-column>
                        <vxe-table-column field="sampledate" title="标本日期" width="90" header-align="center" :formatter="['toDateString', 'yyyy-MM-dd']" align="center"></vxe-table-column>
                        <vxe-table-column field="sampleno" title="样本号" width="60" header-align="center" sortable show-overflow></vxe-table-column>
                        <vxe-table-column field="pat_sex" title="性别 " width="40" header-align="center" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_agestr" title="年龄 " width="40" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_no" title="病历号" width="70" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_typecode" title="病人类型" width="80" align="center" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="report_user" title="检验医生" width="101" header-align="center"></vxe-table-column>
                        <vxe-table-column field="rechk_username" title="审核医生" width="80" header-align="center"></vxe-table-column>
                        <vxe-table-column field="rechk_dt" title="审核时间 " width="134" header-align="center" :formatter="['toDateString', 'yyyy-MM-dd']"></vxe-table-column>
                        <vxe-table-column field="reportid" title="报告ID" width="110" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="input_dt" header-align="center" sortable title="录入时间" width="140" show-overflow></vxe-table-column>
                        <vxe-table-column field="req_stat" title="状态" width="60" header-align="center" align="center"></vxe-table-column>
                    </vxe-table>
                </div>
            </rm-layout-right>
        </div>
    </div>
</template>

<script type="text/javascript">
import input from "../../../../element-ui/packages/input/src/input.vue";
import XE from "xe-utils"; //引入工具类
XE.mixin({
    // 自定义全局的格式化处理函数
    formatSelect(cellValue, list) {
        return list[cellValue] || cellValue;
    }
});
XE.mixin({
    // 自定义全局的格式化处理函数
    formatSelectList(cellValue, list) {
        let item = list.find(item => item.data == cellValue);
        return item ? item.display : "";
    }
});
export default {
    components: { input },
    name: "LIS235",
    data() {
        return {
            MasterData: [],
            MasterData2: [],
            LogList: [],
            MasterDataLoading: false,
            LogLoading: false,
            selectall: false,
            flagcheck: '0',
            datetime1: '',
            datetime2: '',
            barcodeholder: '',
            checkdetails: [],
            reqstatOptiontable: [],
            //表格键盘配置
            keyLocalConfig: {
                isArrow: true
            },
            keyConfig: {
                isDel: true,
                isTab: true,
                isEdit: true,
            },
        };
    },
    components: {},
    watch: {

    },
    computed: {},
    created() {
        this.getoption();
    },
    mounted() {
        this.$refs.barcode.focus();
        // this.testasync();
    },
    updated() {
        this.$nextTick(() => {
            this.$refs.barcode.focus();
        });
    },
    methods: {
        btnSign() {
            this.MasterDataLoading = true;
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS235",
                    method: "post",
                    data: {
                        action: "query",
                        flagcheck: this.flagcheck,
                        datetime1: this.datetime1,
                        datetime2: this.datetime2
                    }
                })
                .then(res => {
                    if (this.flagcheck == '0')
                        this.MasterData = res.data;
                    else
                        this.MasterData2 = res.data;
                    this.MasterDataLoading = false;
                })
                .catch(e => {
                    this.MasterDataLoading = false;
                    console.log("error", e);
                });
        },
        //扫描条码
        scanBarcode(isPackRcv, e) {
            var barcodestr = e.target.value;
            this.txtbarcode = barcodestr;
            e.target.value = "";

            this.barcodeholder = "请输入条码";

            if (barcodestr.length == 0 || barcodestr == this.lasttxtbarcode) {
                return false;
            }
            this.lasttxtbarcode = barcodestr;
            setTimeout(() => {
                // 1秒以后再扫就要做出反应了
                this.lasttxtbarcode = "";
            }, 1000);

            if (barcodestr.length < 8) {
                this.barcodeholder = barcodestr + "，条码太短，请核对";
                return false;
            }

            var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
            if (reg.test(barcodestr)) {
                //避免弹窗后按钮回车再次走入这个事件
                return false;
            }

            //Todo   判断条码长度
            setTimeout(() => {

                //客户端直接判断的放在这个前面

                this.barcodeholder = barcodestr + "  正在处理......";
                this.BarCodeToServer(barcodestr)
                    .then(res => {
                        if (res.flag == '1') {
                            var obj = res.obj[0];
                            if (this.flagcheck == '0') {
                                var arr = this.MasterData.filter(x => x.barcode == barcodestr);
                                if (arr.length > 0) {
                                    arr[0]["operationtype"] = 1;
                                    arr[0]["cp_selection"] = '1';
                                    arr[0]["retuserno"] = obj.retuserno;
                                    arr[0]["retdt"] = obj.retdt;
                                }
                                else {
                                    this.$refs.xTable1.insert(res.obj).then(({ row }) => {
                                        this.$refs.xTable1.setCurrentRow(row);
                                    });
                                    this.MasterData.push(obj);
                                }
                            }
                            else {
                                var arr = this.MasterData2.filter(x => x.barcode == barcodestr);
                                if (arr.length > 0) {
                                    arr[0]["operationtype"] = 1;
                                    arr[0]["cp_selection"] = '1';
                                    arr[0]["retuserno"] = obj.retuserno;
                                    arr[0]["retdt"] = obj.retdt;
                                }
                                else {
                                    this.$refs.xTable3.insert(res.obj).then(({ row }) => {
                                        this.$refs.xTable3.setCurrentRow(row);
                                    });
                                    this.MasterData2.push(obj);
                                }
                            }

                            this.barcodeholder = barcodestr + "  回收成功";
                        }
                        else {
                            this.barcodeholder = barcodestr + res.msg;
                        }
                    })
                    .catch(error => { });


            }, 1);
        },
        //发送条码请求到服务器
        BarCodeToServer(barcodestr) {
            return this.$tool.request({
                url: "LIS/LIS2/LIS235",
                method: "post",
                data: {
                    action: "scanbarcode",
                    barcode: barcodestr
                }
            });
        },


        //主表单元格样式，根据req_groupna显示背景色
        xTableDiv_cellCustomStyle(param) {
            let { row, rowIndex, column, columnIndex } = param;
            if (column.property === "req_groupna") {
                //  console.log("param", param);
                return "background-color:" + this.$pub.ColorChange(row.tube_color) + ";color:" + this.$pub.colorConvert(row.tube_color) + ";";
            }
            if (column.property === 'retuserno' || column.property === 'retdt') {
                return "color-red";
            }
        },
        //选中条码框
        HightlightPos(myField) {
            if (!myField) myField = document.getElementById("barcodediv");
            myField.selectionStart = 0;
            myField.selectionEnd = myField.value.length;
        },
        focusBarcode(myField) {
            if (!myField) myField = document.getElementById("barcodediv");
            myField.focus();
        },
        getoption() {
            //从服务器获取配置
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS235",
                    method: "post",
                    data: {
                        action: "getoptions"
                    }
                })
                .then(res => {
                    this.datetime1 = res.stime + " 00:00:00";
                    this.datetime2 = res.etime + " 23:59:59";
                    if (res.reqstat) {
                        res.reqstat.forEach((item, index) => {
                            this.reqstatOptiontable.push(item);
                        });
                    }
                })
                .catch(e => {
                    console.log("error", e);
                });
        },

        detailretrieve({ row }) {
            var barcode = row.barcode;
            this.LogLoading = true;
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS235",
                    method: "post",
                    data: {
                        action: "querylog",
                        barcode: barcode
                    }
                })
                .then(res => {
                    this.LogList = res.data;
                    this.LogLoading = false;
                })
                .catch(e => {
                    this.LogLoading = false;
                    console.log("error", e);
                });
            this.focusBarcode();
        },
        hasChange() {
            this.MasterData = [];
            this.LogList = [];
            this.btnSign();
        },

        checkMethod({ row }) {
            if (row.retflag == "1") {
                //回收条码不可勾选
                return false;
            } else {
                return true;
            }
        },
        save() {
            if (this.flagcheck == "1") {
                var list = this.$refs.xTable3.getUpdateRecords();
                if (list.length > 0) {
                    this.$tool
                        .request({
                            url: "LIS/LIS2/LIS235",
                            method: "post",
                            data: {
                                action: "save",
                                updateRecords: list
                            }
                        })
                        .then(res => {
                            if (res.flag == '1') {
                                this.$message.success('回收成功！');
                                list.forEach(x => {
                                    this.MasterData2.filter(item => item.barcode == x.cdata.barcode)[0].operationtype = 2;
                                });
                            }
                            else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch(e => {
                            console.log("error", e);
                        });
                }
            }
            else {
                var checklist = this.$refs.xTable1.getUpdateRecords();
                checklist = checklist.filter(x => x.cdata.cp_selection == '1');
                var barcodes = '';
                if (checklist.length > 0) {
                    this.$tool
                        .request({
                            url: "LIS/LIS2/LIS235",
                            method: "post",
                            data: {
                                action: "setflag",
                                updateRecords: checklist
                            }
                        })
                        .then(res => {
                            if (res.flag == '1') {
                                this.$message.success('回收成功！');
                                checklist.forEach(x => {
                                    let mode = this.MasterData.filter(item => item.barcode == x.cdata.barcode)[0];
                                    mode.operationtype = 1;
                                    mode.cp_selection = '1';
                                    mode.retuserno = res.user;
                                    mode.retdt = res.time;
                                });
                            }
                            else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch(e => {
                            console.log("error", e);
                        });
                }
            }
        },

        //主表根据sflag显示不同颜色
        xTableDiv_rowClass({ seq, row, rowIndex, $rowIndex }) {
            if (row.operationtype == 2) {
                return "row-modify";
            }
            // if (row.operationtype == 1) {
            //     return "row-new";
            // }
        },

        ChkAll(e) {
            if (this.MasterData != null && this.MasterData.length > 0) {
                this.MasterData.forEach((item) => {
                    item.cp_selection = e == true ? "1" : "0";
                });
            }
        },

        rowspanMethod({ row, $rowIndex, column, data }) {
            let fields = ["pat_name", "specialtypename", "note"];
            let cellValue = row[column.property];
            if (cellValue && fields.includes(column.property)) {
                let prevRow = data[$rowIndex - 1];
                let nextRow = data[$rowIndex + 1];
                if (prevRow && prevRow[column.property] === cellValue) {
                    return { rowspan: 0, colspan: 0 };
                } else {
                    let countRowspan = 1;
                    while (nextRow && nextRow[column.property] === cellValue) {
                        nextRow = data[++countRowspan + $rowIndex];
                    }
                    if (countRowspan > 1) {
                        return { rowspan: countRowspan, colspan: 1 };
                    }
                }
            }
        },
        repalceComputerName(row) {
            this.$pub.getComputerName(row.mac_address)
                .then((name)=> {
                    row.computer_name = name;
                })
                .catch(()=> {
                    this.$message.error("机器名称查询失败！");
                    //保持原样
                });
        },
    }
};
</script>

<style scoped>
.pagetop {
    /* width: 100%;
    height: 80px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    position: absolute;
    z-index: 99;
    border: 1px solid #ccc; */
    width: 100%;
    left: 0;
    right: 0;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
    height: 80px;
    overflow-x: auto;
    overflow-x: overlay;
}

.pagecenter {
    position: absolute;
    top: 85px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 455px;
    overflow: auto;
}

.middle-right {
    position: absolute;
    height: 100%;
    width: 450px;
    right: 0px;
}
.table1style tr td {
    padding: 1px 1px 1px 5px;
}
::-webkit-scrollbar {
    width: 0px;
    height: 5px;
    border: 4px solid white;
}
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #bbbbbb;
    display: block;
    border-style: solid;
    height: 5px;
    width: 5px;
}
/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
    margin-right: 2px;
    border-width: 4px 4px 4px 0;
    border-color: #f1f1f1 transparent #f1f1f1 #f1f1f1;
    background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
    border-color: #d2d2d2 transparent #d2d2d2 #d2d2d2;
}
/* Right */
::-webkit-scrollbar-button:horizontal:increment {
    margin-left: 2px;
    border-width: 4px 0 4px 4px;
    border-color: #f1f1f1 #f1f1f1 #f1f1f1 transparent;
    background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:increment:hover {
    border-color: #d2d2d2 #d2d2d2 #d2d2d2 transparent;
}
/* .table1style .el-input--medium {
    font-size: 18px;
    font-weight: 700;
} */
/deep/.popdialogstyle tr td div .el-input__inner {
    border: 1px solid rgba(255, 254, 254, 0) !important;
    background-color: rgba(255, 254, 254, 0) !important;
}
/deep/ .el-message-box {
    width: 670px;
}
.mytableclass table tr td {
    padding: 3px;
}
.top-deal {
    right: 5px;
    position: absolute;
    top: 50px;
    display: flex;
    align-items: center;
}
/deep/.processingcls td {
    color: #1087ba;
}
/deep/.errocls td {
    color: red;
}
/deep/.erroalreadyread td {
    color: #0a5fb4;
}
.el-switch,
.el-checkbox {
    float: right;
}
.el-checkbox .el-checkbox__label {
    font-size: 14px !important;
}
#barcodediv::-webkit-input-placeholder {
    color: #0000ff;
}
/deep/ tr.vxe-body--row.row-modify {
    color: blue !important;
}
/deep/ tr.vxe-body--row.row-new {
    color: #cc6600 !important;
}
/deep/.color-red {
    color: red !important;
}
</style>
